//自定义组件（现在只有radio、以后会慢慢扩充其他组件，如checkbox、select...）
class FormComponent{
	//构造
	constructor(type,obj){
	      this.type=type;//表单类型
	      this.obj=obj;//表单对象
	      this.initAll();
	}
	
	//准备初始
	initAll(){
		if(this.type == 'radio'){
			 this.initRadio()
		}else if(this.type == 'check'){
			 this.initCheck()
		}else if(this.type == 'select'){
			this.initSelect()
		}
	}
	 
	 //Radio初始化
	 initRadio(){
	 	var obj=this.obj;
	 	var id=obj.attr('id');//表单名称（如，姓名、年龄等）
	 	var val=obj.val();//表单的值
	 	var myradio=$("div[data-ref='"+id+"']");//表单对应的控件
	 	//控件选中初始化
	 	for(var i=0; i<myradio.length; i++){
	 		if(myradio.eq(i).attr('data-value')==val){
	 			myradio.eq(i).addClass('myradioY');
	 		}else{
	 			myradio.eq(i).addClass('myradioN');
	 		}
	 		//控件内容追加
	 		myradio.eq(i).after("<span class='myradioT'>"+myradio.eq(i).attr('data-txt')+"</span>")
	 	}
	 }
	 
	 //Radio点击事件
	 clickRadio(){
	 	var obj=this.obj;
	 	var id=obj.attr('id');//表单名称（如，姓名、年龄等）
	 	var val=obj.val();//表单的值
	 	var myradio=$("div[data-ref='"+id+"']");//表单对应的控件
	 	myradio.bind('click',function(){
	 		//点击当前radio变成选中样式,其它成为没选中状态
	 		$(this).attr('class','myradioY');
	 		$(this).siblings("div[data-ref='"+id+"']").attr('class','myradioN');
	 		//并把值放入id=ref匹配的val中，方便取值
	 		obj.val($(this).attr('data-value'))
	 	});
	 }
	 
	 
	 
	  //Check初始化
	 initCheck(){
	 	var obj=this.obj;
	 	var id=obj.attr('id');//表单名称（如，姓名、年龄等）
	 	var val=obj.val().split(',') ;//表单的值
	 	var mycheck=$("div[data-ref='"+id+"']");//表单对应的控件
	 	//控件选中初始化
	 	
	 	for(var i=0; i<mycheck.length; i++){
	 		mycheck.eq(i).addClass('mycheckN');
	 		for (var j=0; j<val.length; j++) {
	   			if(mycheck.eq(i).attr('data-value')==val[j]){
		 			mycheck.eq(i).attr('class','mycheckY');
		 		}
	   		}
	 		//控件内容追加
	 		mycheck.eq(i).after("<span class='mycheckT'>"+mycheck.eq(i).attr('data-txt')+"</span>")
	 	}
	 }
	 
	 //Check点击事件
	 clickCheck(){
	 	var obj=this.obj;
	 	var id=obj.attr('id');//表单名称（如，姓名、年龄等）
	 	var mycheck=$("div[data-ref='"+id+"']");//表单对应的控件
	 	mycheck.bind('click',function(){
	 		var val=obj.val();//表单的值
	 		var valArr=val.split(',')
	 		var that=$(this);
	 		var thatval=that.attr('data-value');
	 		
	 		
	 		
	 		//点击当前Check变成选中样式,其它成为没选中状态
	 		//[删除]
	 		if(that.attr('class')=='mycheckY'){
	 			that.attr('class','mycheckN')
	 			//[if判断是不是第一个]
	 			if(val.indexOf(thatval)!=0){
	 				var temp=val.replace(','+thatval,'');
	 				obj.val(temp)
	 				//console.log("不是第一个")
	 				
	 			}else{
	 				//[判断是不是只剩一个了]
	 				if(valArr.length>1){
	 					var temp=val.replace(thatval+',','');
	 					obj.val(temp)
	 				}else{
	 					var temp=val.replace(thatval,'');
	 					obj.val(temp)
	 				}
	 				obj.val(temp)
	 				//console.log("是第一个")
	 			}
	 			//console.log("删除")
	 			
	 		}else{
	 			//[增加]
	 			that.attr('class','mycheckY')
	 			if(val!=''){
	 				obj.val(val+=','+thatval)
	 			}else{
	 				obj.val(val+=thatval)
	 			}
	 			//console.log("增加")
	 			
	 		}
	 		
	 		//console.log(val)
	 	});
	 }


	 initSelect(){
	 		var obj=this.obj;
		 	var id=obj.attr('id');//表单名称（如，姓名、年龄等）
		 	var val=obj.val();//表单的值
		 	var myselect=$("ul[data-ref='"+id+"']");//表单对应的控件

		 	//把ul下边的伪option li都移动到一个大的容器里
		 	var selectItemContet=myselect.html("<div class='selectItemContet'>"+myselect.html()+"</div>")

		 	//给ui和li一个样式
		 	var myselectItem=myselect.find('li');
		 	myselect.addClass('baseSlect');
		 	myselectItem.addClass('baseSlectItem');

		 	//向显示选中后的容器追加被选中内容
		 	var myselectShowTxt='请选择';
		 	//控件选中初始化
		 	for(var i=0; i<myselectItem.length; i++){
		 		if(myselectItem.eq(i).attr('data-value')==val){
		 			myselectShowTxt=myselectItem.eq(i).text()
		 		}
		 	}
		 	myselect.prepend("<div class='myselectShow'>"+myselectShowTxt+"</div>");//追加一个显示选中后的容器
		 	
		 	
	 }

	 //Check点击事件
	 clickSelect(){
	 		var obj=this.obj;
		 	var id=obj.attr('id');//表单名称（如，姓名、年龄等）
		 	var val=obj.val();//表单的值
		 	var myselect=$("ul[data-ref='"+id+"']");//表单对应的控件
		 	var myselectItem=myselect.find('li');
		 	var selectItemContet=myselect.find('.selectItemContet');//包含所有option的容器
		 	var myselectShow=myselect.find('.myselectShow');//追加的那个显示选中后的容器

		 	myselectShow.bind('click',function(){
		 		selectItemContet.show()
		 	})
		 	myselectItem.bind('click',function(){
		 		selectItemContet.hide();
		 		obj.val($(this).attr('data-value'));
		 		myselectShow.text($(this).text())
		 	})

		 	


	 }
}